<template>
    <div class="context">
        <el-row :gutter="24">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <h1>图像识别</h1>
                    <p>自动识别上传的中草药图片，将其相应的详细信息呈现。</p>
                    <el-upload
                        class="upload-demo"
                        drag
                        :auto-upload="true"
                        :http-request="uploadFile"
                        ref="upload_img"
                        action="#"
                        >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip" style="margin-left: 70px;">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <div class="testPicture">
                        <a href="#" v-for="url in urls" :key="url" @click.prevent="test_ification(url)">
                            <img  :src="require('../'+url)" />
                        </a>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <!-- <el-avatar shape="square" :size="540" v-loading="loading&!herb.id" :fit="scale-down" :src="show_img"></el-avatar> -->
                    <el-avatar shape="square" :size="540" v-loading="loading&&herb.loading" :fit="scale-down" :src="show_img"></el-avatar>
                </div>
            </el-col>
        </el-row>
        <el-empty description="描述文字" v-if="!herb.id"></el-empty>
        <div descriptions class="herb_info" v-if="herb.id">
            <el-descriptions column="1" :title="`${herb.herbName}`+'信息'"  :labelStyle="{'font-size': '16px'}" :contentStyle="{'font-size': '15px'}">
                <el-descriptions-item label="示例图"><div > <el-avatar shape="square" :size="100" :fit="scale-down" v-if="herb.img" :src="herb.img"></el-avatar> </div></el-descriptions-item>
                <el-descriptions-item label="英语学名"><div > {{ herb.latinName  }}</div></el-descriptions-item>
                <el-descriptions-item label="别名"><div > {{ herb.alias }} </div></el-descriptions-item>
                <el-descriptions-item label="功效分类"><div > {{ typeName }} </div></el-descriptions-item>
                <el-descriptions-item label="药用部分"><div > {{ herb.medicinalPart }} </div></el-descriptions-item>
                <el-descriptions-item label="性味"><div > {{ herb.natureFlavor }} </div></el-descriptions-item>
                <el-descriptions-item label="归经"><div > {{ herb.channelTropism }} </div></el-descriptions-item>
                <el-descriptions-item label="产地分布"><div class="info_container "> {{ herb.originDistribution }} </div></el-descriptions-item>
                <el-descriptions-item label="采收加工"><div > {{ herb.harvestingProcessing }} </div></el-descriptions-item>
                <el-descriptions-item label="功效与作用"><div > {{ herb.efficacyEffect }} </div></el-descriptions-item>
                <el-descriptions-item label="植物形态"><div > {{ herb.plantMorphology }} </div></el-descriptions-item>
                <el-descriptions-item label="临床应用"><div > {{ herb.clinicalApplication }} </div></el-descriptions-item>
                <el-descriptions-item label="药理研究"><div > {{ herb.pharmacologicalResearch }} </div></el-descriptions-item>
                <el-descriptions-item label="药材性状"><div > {{ herb.drugProperties }} </div></el-descriptions-item>
                <el-descriptions-item label="化学成分"><div > {{ herb.chemicalComponent }} </div></el-descriptions-item>
                <el-descriptions-item label="使用禁忌"><div > {{ herb.usageTaboo }} </div></el-descriptions-item>
                <el-descriptions-item label="配伍药方"><div > {{ herb.compatiblePrescription }} </div></el-descriptions-item>
            </el-descriptions>
            <div class="block">
                <span class="demonstration">系统识别评价</span>
                <el-rate
                    allow-half
                    show-score
                    @change="changeScore"
                    v-model="score"
                    :colors="colors">
                </el-rate>
            </div>
        </div>
    </div>
</template>

<script>
import Cookie from 'js-cookie'
  export default {
    data(){
        return{
            loading:true,
            herbTypeList:[],
            flow:{flowId:''},
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            score:null,
            show_img: require("../assets/lavender.jpg"),
            upload_img:"",
            urls:[
                "assets/lavender.jpg",
                "assets/lotusLeaf.jpg",
                "assets/PurpleFlowers.jpg",
            ],
            herb:{
                id:"",
                herbName: "",
                latinName: "",
                herbTypeId: "",
                medicinalPart: "",
                alias: "",
                plantMorphology: "",
                originDistribution: "",
                harvestingProcessing: "",
                drugProperties: "",
                natureFlavor: "",
                channelTropism: "",
                efficacyEffect: "",
                clinicalApplication: "",
                pharmacologicalResearch: "",
                chemicalComponent: "",
                usageTaboo: "",
                compatiblePrescription: "",
                img:null,
                loading:false,
            },
        }
    },
    methods:{
        getHerbalTypeList(){
            this.$axios.get('/selectByHerbType')
            .then(({data}) => {// 请求成功，返回
                if(data.code===200){
                    this.herbTypeList=data.list
                }else{
                    this.$message.error(data.data.message)
                }
            })
            .catch((err) => {// 请求失败
                console.log(err);
            });
        },
        changeScore(){
            console.log(this.flow.flowId)
            this.$axios.post('/updateFlow',JSON.stringify({
                            id:this.flow.id,
                            attitude:this.score
                        }),{headers:{'Content-Type':'application/json'}})
            .then(({data}) => {// 请求成功，返回
                if(data.code===200){
                    this.$message({
                            type: 'success',
                            message: data.data.message
                        });
                    this.herb={}
                }else{
                    this.$message({
                        type: 'error',
                        message: data.data.message
                    });
                }
            })
            .catch((err) => {// 请求失败
                console.log(err);
            });
        },
        test_ification(url){
            fetch(require('../'+url))
                .then((response) => response.blob())
                .then((blob) => {
                    this.show_img=URL.createObjectURL(blob);
                    this.upload_img=blob;
                    this.loading=true
                    this.herb.loading=true
                    this.submit();
                })
                .catch((error) => {
                    console.error('Error loading image:', error);
                });
        },
        uploadFile(param){
            console.log(param)
            this.upload_img=param.file
            this.show_img=URL.createObjectURL(this.upload_img);
            this.loading=true
            this.herb.loading=true
            this.submit();
        },
        submit(){
            this.herb.id=""
            let token=Cookie.get("token")
            if(token===undefined||""===token){
                this.$message({
                    type: 'error',
                    message: "未登录，无法识别！"
                });
                this.loading=false
                return
            }
            const formDatas = new FormData();
            formDatas.append("file",this.upload_img)
            this.$axios.post("/recognition",formDatas, {headers: {'Content-Type': 'multipart/form-data'}}).then(({data}) => {// 请求成功，返回
                    if(data.code==200){
                        this.$message({
                            type: 'success',
                            message: data.data.message
                        });
                        this.herb=data.data.herb
                        this.loading=false
                        this.flow=data.data.flow
                        this.herb.img=URL.createObjectURL(data.data.herb.img);
                    }else {
                        this.herb.loading=false
                        this.loading=false
                        this.$message({
                            type: 'error',
                            message: data.data.message
                        });
                    }
            }).catch((err) => {// 请求失败
                console.log(err);
            });
            this.$refs.upload_img.clearFiles()
        },
        jump(){
            if(this.$route.path !== "/imageIdentification" ) {
                this.$router.push("/imageIdentification")
            }
        }
    },
    mounted(){
        this.getHerbalTypeList()
    },
    computed:{
        typeName(){
            let name=""
            for(let ind in this.herbTypeList){
                if(this.herbTypeList[ind].id==this.herb.herbTypeId){
                    name=this.herbTypeList[ind].typeName
                }
            }
            return name
        }
    }
  }
  </script>
<style lang="less" scoped>
.context{
    margin: 40px auto;
    width: 80%;
    text-align: left;
    .block{
        margin-top: 50px;
        margin-left: 70%;
    }
/deep/ .el-rate__icon{
    font-size: 27px;
    margin-top: 15px;
    margin-left: 15px;
    }
    .herb_info{
        width: 70%;
        margin: auto;
        margin-top: 50px;
    }
    .el-avatar{
        border-radius:25px;
    }
    .testPicture{
        img{
            margin-top: 50px;
            height: 70px;
            margin-right: 22px;
            width: auto;
            border-radius:5px;
        }
    }
    h1{
        margin-top: 40px;
        margin-bottom: 20px;
        font-size: 50px;
    }
    p{
        font-size: 17px;
        color: #555;
    }
}
.upload-demo{
    margin-top: 50px;
}
</style>